<!-- 时间类型范围搜索 -->
<template>
  <div>
    <el-form :inline="true" :model="form">
      <el-form-item label="统计单位：">
        <el-select v-model="form.unit" @change="change">
          <el-option v-for="item in units" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="时间范围：">
        <el-date-picker v-if="form.unit === 'day'" v-model="form.value" type="daterange" value-format="timestamp" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptionsDate">
        </el-date-picker>
        <el-date-picker v-if="form.unit === 'month'" v-model="form.value" type="monthrange" value-format="timestamp" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptionsMonth">
        </el-date-picker>

        <template v-if="form.unit === 'year'">
          <el-col :span="11">
            <el-date-picker v-model="form.value[0]" type="year" placeholder="开始日期" style="width: 100%;" value-format="timestamp" :picker-options="pickerOptionsYear1">
            </el-date-picker>
          </el-col>
          <el-col class="flex justify-center" :span="2">-</el-col>
          <el-col :span="11">
            <el-date-picker v-model="form.value[1]" type="year" placeholder="结束日期" style="width: 100%;" value-format="timestamp" :picker-options="pickerOptionsYear2">
            </el-date-picker>
          </el-col>
        </template>
      </el-form-item>

      <slot />
    </el-form>
  </div>
</template>

<script>
import { onMounted, reactive, ref } from '@vue/composition-api';

function timeChange() {
  const units = ref([{
    value: 'day',
    key: 'YYYY-MM-DD',
    label: '日',
  }, {
    value: 'month',
    key: 'YYYY-M',
    label: '月',
  }, {
    value: 'year',
    key: 'YYYY',
    label: '年',
  },])

  let timeOptionRange = null

  function onPick(date) {
    // 当选中了第一个日期还没选第二个
    // 只选中一个的时候自动赋值给minDate，当选中第二个后组件自动匹配，将大小日期分别赋值给maxDate、minDate
    if (date.minDate && !date.maxDate) {
      timeOptionRange = date.minDate;
    }
    // 如果有maxDate属性，表示2个日期都选择了，则重置timeOptionRange
    if (date.maxDate) {
      timeOptionRange = null;
    }
  }
  function disabledDateMonth(time, secondNum) {
    if (timeOptionRange) {
      //如果有选中时间 设置超过选中时间后的30天||超过选中前的30天||大于当前时间 不可选
      return time.getTime() > timeOptionRange.getTime() + secondNum || time.getTime() < timeOptionRange.getTime() - secondNum || time.getTime() > (Date.now() - 8.64e6);
    } else {
      //如果没有选中时间（初始化状态） 设置当前时间后的时间不可选
      return time.getTime() > (Date.now() - 8.64e6);
    }
  }
  // 日
  const pickerOptionsDate = reactive({
    disabledDate(time) {
      // 获取时间范围(30天的毫秒数)
      let secondNum = 30 * 24 * 60 * 60 * 1000;
      return disabledDateMonth(time, secondNum)
    },
    onPick
  })

  // 月
  const pickerOptionsMonth = reactive({
    disabledDate(time) {
      // 获取时间范围(12个月的毫秒数)
      let secondNum = 12 * 30 * 24 * 60 * 60 * 1000;
      return disabledDateMonth(time, secondNum)
    },
    onPick
  })

  // 年
  const pickerOptionsYear1 = reactive({
    disabledDate(time) {
      // 获取选中时间
      let timeOptionRange = form.value[1];
      // 获取时间范围(10年的毫秒数)
      let secondNum = 9 * 12 * 30 * 24 * 60 * 60 * 1000;
      if (timeOptionRange) {
        return time.getTime() > timeOptionRange || time.getTime() < timeOptionRange - secondNum || time.getTime() > (Date.now() - 8.64e6);
      } else {
        //如果没有选中时间（初始化状态） 设置当前时间后的时间不可选
        return time.getTime() > (Date.now() - 8.64e6);
      }
    },
  })

  const pickerOptionsYear2 = reactive({
    disabledDate(time) {
      // 获取选中时间
      let timeOptionRange = form.value[0]
      // 获取时间范围(10年的毫秒数)
      let secondNum = 10 * 12 * 30 * 24 * 60 * 60 * 1000;
      if (timeOptionRange) {
        return time.getTime() < timeOptionRange || time.getTime() > timeOptionRange + secondNum || time.getTime() > (Date.now() - 8.64e6);
      } else {
        //如果没有选中时间（初始化状态） 设置当前时间后的时间不可选
        return time.getTime() > (Date.now() - 8.64e6);
      }
    },
  })

  const form = reactive({
    unit: 'day',
    value: []
  })

  onMounted(() => {
    form.value = [dayjs().date(1).valueOf(), dayjs().valueOf()]
  })

  function change() {
    form.value = []
    timeOptionRange = null
  }

  function getTime() {
    let unit = form.unit
    return {
      startDate: form.value[0] ? dayjs(form.value[0]).startOf(unit).format('YYYY-MM-DD HH:mm:ss') : null,
      endDate: form.value[1] ? dayjs(form.value[1]).endOf(unit).format('YYYY-MM-DD HH:mm:ss') : null,
      type: unit,
    }
  }

  return {
    units,
    pickerOptionsDate,
    pickerOptionsMonth,
    pickerOptionsYear1,
    pickerOptionsYear2,
    form,
    change,
    getTime
  }
}

export default {
  name: 'TimeChange',
  setup() {
    return {
      ...timeChange()
    }
  }
}
</script>
<style lang='scss' scoped>
</style>